<template>
	<view class="page">
		<view class="address_box">
			<uni-swipe-action>
				<view class="address_item_li">
					<uni-swipe-action-item :options="options">
						<view class="address_item">
							<view class="address_item_wrap">
								<view class="address_item_left">
									<view class="news">
										<text class="name">老李</text>
										<text class="phone">1351531213</text>
										<text class="setDefault">默认</text>
									</view>
									<view class="my_address">
										河南省信阳市羊山新区恒大名都
									</view>
								</view>
								<navigator url="/pages/my/my_address/modify_address" class="address_item_right" hover-class="none">
									<image class="address_item_icon" src="../../../static/img/address_icon.png"></image>
								</navigator>
							</view>
						</view>
					</uni-swipe-action-item>
				</view>
				<view class="address_item_li">
					<uni-swipe-action-item :options="options">
						<view class="address_item">
							<view class="address_item_wrap">
								<view class="address_item_left">
									<view class="news">
										<text class="name">老李</text>
										<text class="phone">1351531213</text>
										<text class="setDefault">默认</text>
									</view>
									<view class="my_address">
										河南省信阳市羊山新区恒大名都
									</view>
								</view>
								<navigator url="/pages/my/my_address/modify_address" class="address_item_right" hover-class="none">
									<image class="address_item_icon" src="../../../static/img/address_icon.png"></image>
								</navigator>
							</view>
						</view>
					</uni-swipe-action-item>
				</view>
				<view class="address_item_li">
					<uni-swipe-action-item :options="options">
						<view class="address_item">
							<view class="address_item_wrap">
								<view class="address_item_left">
									<view class="news">
										<text class="name">老李</text>
										<text class="phone">1351531213</text>
										<text class="setDefault">默认</text>
									</view>
									<view class="my_address">
										河南省信阳市羊山新区恒大名都
									</view>
								</view>
								<navigator url="/pages/my/my_address/modify_address" class="address_item_right" hover-class="none">
									<image class="address_item_icon" src="../../../static/img/address_icon.png"></image>
								</navigator>
							</view>
						</view>
					</uni-swipe-action-item>
				</view>
				<view class="address_item_li">
					<uni-swipe-action-item :options="options">
						<view class="address_item">
							<view class="address_item_wrap">
								<view class="address_item_left">
									<view class="news">
										<text class="name">老李</text>
										<text class="phone">1351531213</text>
										<text class="setDefault">默认</text>
									</view>
									<view class="my_address">
										河南省信阳市羊山新区恒大名都
									</view>
								</view>
								<navigator url="/pages/my/my_address/modify_address" class="address_item_right" hover-class="none">
									<image class="address_item_icon" src="../../../static/img/address_icon.png"></image>
								</navigator>
							</view>
						</view>
					</uni-swipe-action-item>
				</view>
			</uni-swipe-action>

			<button class="btn" type="warn" @click="addAddress">新增地址</button>
		</view>
	</view>
</template>

<script>
	import uniSwipeAction from '@/components/uni-ui/uni-swipe-action/uni-swipe-action.vue'
	import uniSwipeActionItem from '@/components/uni-ui/uni-swipe-action-item/uni-swipe-action-item.vue'
	export default {
		components: {
			uniSwipeAction,
			uniSwipeActionItem
		},
		data() {
			return {
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#DC3D3D'
					}
				}]
			};
		},
		methods: {
			// 点击进去新增地址页面
			addAddress() {
				uni.navigateTo({
					url: '/pages/my/my_address/modify_address'
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #fff;
	}

	.address_box {
		.address_item {
			width: 750rpx;
			padding: 33rpx 33rpx 0rpx;
			font-size: 26rpx;
			.address_item_wrap {
				position: relative;
				padding-bottom: 33rpx;
				border-bottom: 1px rgba($color: #333, $alpha: .1) solid;

				.address_item_left {
					.news {
						margin-bottom: 33rpx;

						text {
							line-height: 100%;
							vertical-align: middle;
							font-size: 36rpx;
							color: #565656;
						}

						.name {
							padding-right: 63rpx;
						}

						.phone {
							padding-right: 22rpx;
						}

						.setDefault {
							display: inline-block;
							padding: 0 8rpx;
							height: 36rpx;
							line-height: 36rpx;
							vertical-align: middle;
							border-radius: 3rpx;
							background: #368AFF;
							font-size: 26rpx;
							color: #fff;
						}
					}

					.my_address {
						width: 90%;
						line-height: 100%;
						color: #B3B3B3;
						font-size: 32rpx;
					}
				}

				.address_item_right {
					position: absolute;
					right: 0;
					top: 20rpx;

					.address_item_icon {
						width: 50rpx;
						height: 50rpx;
					}
				}
			}

		}

		.btn {
			width:683rpx;
			height:100rpx;
			margin: 120rpx auto 0;
			line-height: 100rpx;
			background:rgba(54,138,255,1);
			border-radius:50rpx;
			border:1px solid rgba(151,151,151,.5);
			font-size: 36rpx;
			color: #fff;
			text-align: center;
		}
	}
</style>
